<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--遍历列表-->
    <h2 v-for="add in address">
       地址： {{add}}
    </h2>
    <hr>
    <h2 v-for="add of address">
       地址： {{add}}
    </h2>

    <hr>
<!--    遍历时提供索引-->

    <h2 v-for="(add,i) of address" :key="i">
        地址：{{i+1}} - {{add}}
    </h2>
    <hr>
<!--    遍历对象数组-->
<table width="800px" border="1" cellspacing="0">
    <tr>
        <td>编号</td>
        <td>名字</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <!--遍历学生-->
    <tr v-for="(stu,index) in students" :key="index">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
        <td>{{stu.address}}</td>
    </tr>
</table>

<!--    遍历字符串-->

    <ul>
        <li v-for="(s,index) in str" :key="index">
            {{index}}--{{s}}
        </li>
    </ul>

    <!--遍历纯数字-->
    <ul>
        <li v-for="num of 100">
            <h2 v-if="num % 2 == 0">{{num}}是偶数</h2>
        </li>
    </ul>
    ‘
    <hr>
<!--    遍历对象-->
    <ul>
        <li v-for="(c,k) in car" :key="k">
            {{c}}-{{k}}
        </li>
    </ul>

    <br>
    <br>
    <br>
    <br>


</div>

</body>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //数组
                address:['昆明','大理','丽江','啦啦啦'],
                //对象数组
                students:[
                    {id:1,name:'张三1',age:18,address:'昆明'},
                    {id:2,name:'张三2',age:18,address:'昆明'},
                    {id:3,name:'张三3',age:18,address:'昆明'},
                    {id:4,name:'张三4',age:18,address:'昆明'},
                    {id:5,name:'张三5',age:18,address:'昆明'},
                ],
                //字符串
                str:'HelloWorld!!!',
                //对象
                car:{
                    name:'奥迪RS7',
                    price:'250万',
                    color:"红色"
                }

            }
        },
        //函数定义的位置
        methods:{

        },
        mounted(){

        },
        created(){}
        // beforeCreate(){},
        // created(){},
        // beforeMount(){},
        // mounted(){
        //     alert("我渲染完了")
        // },
        // beforeUpdate(){},
        // updated(){},
        // beforeDestory(){},
        // Destory(){}
    });

</script>
</html>